<template>
	<!-- scroll-into-view: 滚动到哪个 id 元素上 -->
	<scroll-view class="scrollView" scroll-y="true" :scroll-into-view="id">
		<!-- 当前位置 -->
		<view class="location">
			<text class="choose_city">{{address}}</text>
			<text class="gps">GPS定位</text>
		</view>
		<!-- 热门城市 -->
		<view class="hot_city">
			<view class="city_title">
				热门城市
			</view>
			<view class="hot_city_container">
				<view v-for="city in hotCities" :key="city" @click="switchCity(city+'市')">
					{{city}}
				</view>
			</view>
		</view>
		<!-- 城市列表，每类城市以首字母为 id -->
		<view class="city_list">
			<!-- {{$options.cityList}} 不支持 -->
			<view v-for="item in cityList" :key="item.letter" :id="item.letter">
				<view class="letter">
					{{item.letter}}
				</view>
				<view class="city" v-for="city in item.citys" :key="city"  @click="switchCity(city)">
					{{city}}
				</view>
			</view>
		</view>
		<!-- 右侧字母 -->
		<view class="right_letter">
			<text v-for="letter in letters" :key="letter" @click="moveToHere(letter)">
				{{letter}}
			</text>
		</view>
	</scroll-view>
</template>

<script>
	import cityList from "../../utils/cityList.js"

	const {
		globalData
	} = getApp();
	export default {
		// cityList,
		data() {
			return {
				id: '', // 滚动到的 id 位置
				hotCities: ['北京', '上海', '广州', '深圳', '天津', '杭州', '南京', '苏州', '成都', '武汉', '重庆', '西安'],
				cityList,
				// address: globalData.address ?? "",
			}
		},

		computed: {
			/* 生成26个大写字母 */
			letters() {
				let arr = [];
				for (let i = 65; i < 91; i++) {
					arr.push(String.fromCharCode(i))
				}
				return arr;
			},

			address() {
				return globalData.address ? globalData.address : '';
			}
		},

		methods: {
			moveToHere(id) {
				// console.log(id);
				this.id = id;
			},

			switchCity(city) {
				globalData.address = city;
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	.scrollView {
		height: 1334rpx;
	}

	.location {
		display: flex;
		width: 750rpx;
		height: 90rpx;
		align-items: center;
	}

	.choose_city {
		font-size: 24rpx;
		margin: 0 20rpx 0 30rpx;
	}

	.gps {
		color: #C0C0C0;
		font-size: 20rpx;
	}

	.hot_city {
		display: flex;
		flex-direction: column;
		width: 750rpx;
		height: 400rpx;
		border-bottom: 1px dashed #DDDDDD;
		border-top: 1px dashed #DDDDDD;
		margin-bottom: 20rpx;
	}

	.city_title {
		font-size: 24rpx;
		color: #00ACEC;
		margin: 20rpx 0 18rpx 30rpx;
	}

	.hot_city_container {
		margin: 0 70rpx 0 28rpx;
	}

	.hot_city_container view {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		text-align: center;
		background-color: white;
		margin: 8rpx 8rpx 0 0;
		border: 1px solid #00ACEC;
		border-radius: 6rpx;
		float: left;
	}

	.letter {
		color: #aeaeae;
		font-size: 22rpx;
		margin: 6rpx 0 0 30rpx;
	}

	.city {
		margin: 0 68rpx 0 28rpx;
		height: 70rpx;
		border-bottom: 1px dashed #DDDDDD;
		line-height: 70rpx;
		font-size: 24rpx;
	}

	.right_letter {
		width: 40rpx;
		position: fixed;
		right: 20rpx;
		top: 200rpx;
		display: flex;
		flex-direction: column;
		font-size: 18rpx;
		color: #515b67;
	}

	.right_letter text {
		text-align: center;
		margin-bottom: 9rpx;
	}
</style>
